<template>
	<view class="page">
		<!-- 搜索 -->
		<view class="search-head">
			<view class="back" @click="onBack">
				<text></text>
			</view>
			<view class="search">
				<text class="iconfont icon-fadajing"></text>
				<input type="text" @confirm="sendgoodsList()" v-model="keyword" placeholder="搜索商品" />
			</view>
			<view class="cut" @click="isList = !isList">
				<text class="iconfont" :class="isList?'icon-shitu01':'icon-shitu02'"></text>
			</view>
		</view>
		<!-- 筛选 -->
		<view class="screen-info">
			<view class="screen-list">
				<view class="list" v-for="(item,index) in search" :key="index" 
				:class="{'action':screenShow===item.sort}" @click="onSynthesize(item.sort)">
					<text>{{item.name}}</text>
					<text v-show="item.sort === 'sort'" class="iconfont icon-sanjiao icon_z"></text>
					<view v-show="item.sort === 'price'" class="icon_j">
						<text class="iconfont icon-sanjiao up" :class="{active:'asc' === sort_class}"></text>
						<text class="iconfont icon-sanjiao down" :class="{active:'desc' === sort_class}"></text>
					</view>
					<view v-show="item.sort === 'filtter'" class="list">
						<text class="iconfont icon-shaixuan icon_s"></text>
					</view>
				</view>
			</view>
			<!-- 筛选弹窗 -->
			<view class="screen-popup" v-show="isScreen">
				<view class="synthesize">
					<view class="list" @click="onSynthesize('sort', item.sort)" v-for="(item,index) in listKey" :key="index">
						<text class="title">{{item.name}}</text>
						<text :class="{check:item.sort == sort_class}"></text>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="goods-data">
			<mescroll-body ref="mescrollRef"
				@init="mescrollInit"
				@down="downCallback"
				@up="upCallback"
				:down="downOption"
				:up="upOption"
				:top="0">
				<view class="goods-list">
					<view :class="isList?'list-view':'list-li'" v-for="(item,index) in goodsList" @click="onGoodsList(item)" :key="index">
						<view class="thumb">
							<image :src="item.img" mode="heightFix"></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="two-omit">{{item.name}}</text>
							</view>
							<view class="price">
								<view class="retail-price">
									<text class="min">￥</text>
									<text class="max">{{item.price}}</text>
									<view class="tag" v-if="item.is_goods === 1">
										<text>抢购价</text>
									</view>
								</view>
								<view class="vip-price">
									<text class="min">￥</text>
									<text class="max">{{item.vip_price}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		<!-- 抽屉 -->
		<view class="cu-modal drawer-modal justify-end" :class="{'show':isDrawer}" @click="isDrawer = false" style="position: absolute;">
			<view class="cu-dialog basis-lg" @click.stop="isDrawer = true">
				<view class="serve">
					<view class="title">
						<text>服务</text>
					</view>
					<view class="serve-list">
						<view class="list action">
							<text>会员专享</text>
						</view>
						<view class="list">
							<text>活动</text>
						</view>
						<view class="list">
							<text>活动</text>
						</view>
					</view>
				</view>
				<view class="price-screen">
					<view class="title">
						<text>价格区间</text>
					</view>
					<view class="price-section">
						<input type="number" placeholder="最低价">
						<text></text>
						<input type="number" placeholder="最高价">
					</view>
				</view>
				<view class="operation-btn">
					<view class="btn" @click.stop="isDrawer = false">
						<text>取消</text>
					</view>
					<view class="btn action">
						<text>确认</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				search:[
					{name:'综合',sort:'sort'},
					{name:'销量',sort:'sales'},
					{name:'价格',sort:'price'},
					{name:'筛选',sort:'filtter'},
				],
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {},
				// 列表视图切换
				isList: true,
				// 筛选弹窗
				isScreen: false,
				// 筛选切换
				screenShow:'sort',
				// 抽屉
				isDrawer: false,
				keyword: '',// 搜索关键词
				sort_class:-1,//综合选中
				listKey:[
					{name:'综合排序','sort':'defult'},
					{name:'评论数从高到低','sort':'score'}
				],
				goodsList:[],//搜索商品数据
			}
		},
		onLoad(params) {
			console.log(params.keyword)
			this.keyword = decodeURIComponent(JSON.parse(params.keyword||''));
			this.sendgoodsList()
		},
		methods: {
			//搜索商品数据
			sendgoodsList: function(type) {
				this.$api.recommend({
					keyword: this.keyword,
					sort: type,
				}).then((res) => {
					// console.log('首页商品',res)
					this.$url(res.data, 'img')
					this.goodsList = res.data
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback(){
				this.mescroll.endSuccess();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				setTimeout(() =>{
					this.mescroll.endByPage(10, 20);
				},2000)
			},
			/**
			 * 返回点击
			 */
			onBack(){
				this.$router.go(-1)
			},
			/**
			 * 综合点击
			 * @param {Number} type
			 */
			onSynthesize(type, item){
				console.log(type)
				console.log(item)
				this.screenShow = type;

				switch (type) {
					case 'sort':
						if(!!item) this.sort_class = item,this.sendgoodsList(item);
						this.isScreen = !this.isScreen;
						break;
					case 'sales':
						this.sendgoodsList(type);
						break;
					case 'price':
						if (this.sort_class == 'desc')this.sort_class = 'asc';
						else this.sort_class = 'desc';
						this.sendgoodsList(type);
						break;
					case 'filtter':
						this.isDrawer = true
						break;
					}
			},
			/**
			 * 商品列表点击
			 */
			onGoodsList(item,index){
				uni.navigateTo({
					url: '/pages/GoodsDetails/GoodsDetails?item=' + encodeURIComponent(JSON.stringify(item)),
					animationType: 'zoom-fade-out',
					animationDuration: 200
				})
			}
		},
		watch: {
			screenShow(news, olds){
				if(news !== 'sort') this.isScreen = false;this.sort_class = -1;
				if(news !== 'filtter') this.isDrawer = false;
				if(news === 'price') this.sort_class = 'asc';
			}
		}
	}
</script>

<style scoped lang="scss">
	@import  'SearchGoodsList.scss';
	.active{color: $base!important;}	
</style>
